<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Index Page</title>
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="/static/jquery/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/websocket/sockjs-0.3.4.js" type="text/javascript"></script>
    <script src="/static/websocket/stomp.js" type="text/javascript"></script>
    <style>
        .logout {
            margin: 10px;
        }

        #message {
            margin-top: 10px;
        }

        #message > .alert {
            margin-bottom: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .hr {
            border-bottom: 2px solid #ddd;
            margin: 15px 0px;
            float: left;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Spring Security Demo</a>
        </div>
        <a class="btn btn-default navbar-right logout" href="/login?logout" target="_self">
            <span class="glyphicon glyphicon glyphicon-off"></span>
        </a>
    </nav>
    <div class="form-group">
        <div class="control-group">
            <form id="send" action="/send" method="post" class="form-horizontal">
                <input type="hidden" name="from" value="${name}">

                <div class="form-group">
                    <label class="control-label col-lg-2">Message</label>

                    <div class="col-lg-5">
                        <input type="text" name="message" class="form-control"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">To</label>

                    <div class="col-lg-5">
                        <select class="form-control" name="to">
                            <c:forEach items="${users}" var="user">
                                <option value="${user}">${user}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-offset-2 col-lg-5">
                        <button type="submit" class="btn btn-default">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="hr"></div>
    <div class="form-group">
        <button class="btn btn-primary" id="connect">Connect</button>
        <button class="btn" id="disconnect">Disconnect</button>
        <button class="btn btn-primary hidden" id="clearall">Clearall</button>

        <div id="message">
            <%--<div class="alert alert-danger alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                fjlasfsdafsdaf
            </div>--%>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        var stompClient = null, btnCl = "btn-primary", dis = "disabled";
        var $conn = $("#connect"), $disconn = $("#disconnect"), $msg = $("#message"), $clearall = $("#clearall");
        var template = "<div class='alert alert-danger alert-dismissible' role='alert'>" +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>" +
                "<span aria-hidden='true'>&times;</span></button>$message</div>";


        $conn.on("click", function () {
            $(this).removeClass(btnCl).attr(dis, true);
            $disconn.addClass(btnCl).removeAttr(dis);
            $clearall.removeClass("hidden");
            var socket = new SockJS("/chat");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function () {
                stompClient.subscribe("/user/queue/chat", function (frame) {
                    $msg.append($(template.replace("$message", frame.body)));
                });
            });
        });

        $disconn.on("click", function () {
            $(this).removeClass(btnCl).attr(dis, true);
            $conn.addClass(btnCl).removeAttr(dis);
            $clearall.addClass("hidden");
            if (stompClient != null) {
                stompClient.disconnect();
                console.log("disconnected");
            }
        });

        $clearall.on("click", function() {
            $msg.children().remove();
        });
    });
</script>